<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
    body{
        font-size: 14px;
    }
.title{
    width: 260px;
    text-align: center;
    font-size: 18px;
}
div{
    margin: 10px;
}
label{
    vertical-align: top;
}
span{
    margin-left: 10px;
}
</style>
<script type="text/javascript" src = "JS/jquery-3.5.1.min.js"></script>
</head>

<body>
<script type="text/javascript">
    $(document).ready(function(){
        $("textarea").keyup(function(){
            var value=$(this).val().substr(0,30);
            $(this).val(value);
            var len=$(this).val().length;
            var str="您还有"+(30-len)+"个字可以输入!";
            $("span").text(str).css("color","red");
        })
    });
</script>
<form id="form" name="form">
    <div class="title">用户信息</div>
    <div class="one">
        <label>姓名：</label>
        <input name="name" id="name" type="text">
    </div>
    <div class="one">
        <label>简介：</label>
        <textarea name="intro" cols="26" rows="3"></textarea><span></span>
    </div>
</form>

</body>
</html>